<template>
  <div>
    <el-table
        :data="pgInfo.pg.filter(data => !search || data['primary-port'].toLowerCase().includes(search.toLowerCase())
      || data['secondary-port'].toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-cell-style="headerCellClass"
        highlight-current-row>
      <el-table-column
          label="ID"
          sortable
          width="60"
          prop="pg-id">
      </el-table-column>
      <el-table-column
          label="保护名称"
          prop="name">
      </el-table-column>
      <el-table-column
          label="保护类型"
          prop="protection-type">
      </el-table-column>
      <el-table-column
          label="倒换类型"
          prop="switch-type">
      </el-table-column>
      <el-table-column
          label="触发倒换条件"
          prop="switch-reason">
      </el-table-column>
      <el-table-column
          label="倒换方向"
          prop="protection-direction">
      </el-table-column>
      <el-table-column
          label="WTR(s)"
          prop="wait-to-restore-time">
      </el-table-column>
      <el-table-column
          label="主用端口"
          prop="primary-port">
        <template slot-scope="scope">
          {{ "槽位-" + computeSlot(scope.row['primary-port']) + "-端口-" + computeName(scope.row['primary-port']) }}
        </template>

      </el-table-column>
      <el-table-column
          label="备用端口"
          prop="secondary-port">
        <template slot-scope="scope">
          {{ "槽位-" + computeSlot(scope.row['primary-port']) + "-端口-" + computeName(scope.row['primary-port']) }}
        </template>
      </el-table-column>
      <el-table-column
          label="工作端口"
          prop="selected-port">
        <template slot="label">
          <p style="color: #0038f5">工作端口</p>
        </template>
        <template slot-scope="scope">
          {{ "槽位-" + computeSlot(scope.row['primary-port']) + "-端口-" + computeName(scope.row['primary-port']) }}
        </template>
      </el-table-column>
      <el-table-column
          label="延迟时间(us)"
          prop="hold-off">
      </el-table-column>
      <el-table-column
          label="返回模式"
          prop="reversion-mode">
        <template slot-scope="scope">
          {{ scope.row['reversion-mode'] === 'return' ? "返回" : "非返回" }}
        </template>
      </el-table-column>
      <el-table-column
          align="right" width="210">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入端口关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>

          <el-button
              size="mini"
              type="success"
              @click="performProtectionCommand(scope.$index, scope.row)">倒换
          </el-button>

          <el-button slot="reference" size="mini" type="danger"
                     @click="handleDelete(scope.$index, pgInfo.pg)">删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <div style="float: right;margin-right: 0px">
      <el-button type="primary" @click="pgFormVisible = true">新建</el-button>
      <el-button type="success" @click="getPgs">刷新</el-button>
    </div>

    <div class="tip" v-show="false"><p style="align:left"><code>修改 倒换 删除</code>
      3个按钮暂时存在，其正常操作应放置在表格鼠标右键（有修改保护组、保护组倒换、SD倒换、删除保护组）中</p></div>
    <el-dialog
        :visible.sync="pgFormVisible"
        width="350px"
        :show-close="false"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">保护组配置</div>
      </div>
      <PGConfig></PGConfig>
    </el-dialog>

    <el-dialog
        :visible.sync="changeValue"
        :show-close="false"
        width="400px"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">保护组修改</div>
      </div>
      <el-form :model="pg" ref="pgForm" label-width="100px" class="config_form">
        <el-form-item label="保护名称" prop="name">
          <el-input v-model="pg.name"></el-input>
        </el-form-item>
        <el-form-item label="倒换类型" prop="switchType">
          <el-select v-model="pg['switch-type']" clearable placeholder="请选择倒换类型">
            <el-option label="单端倒换" value="单端倒换"></el-option>
            <el-option label="双端倒换" value="双端倒换"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="WTR" prop="holdOffTime">
          <el-input v-model="pg['wait-to-restore-time']">
            <i slot="suffix" style="margin-right: 10px">s</i>
          </el-input>
        </el-form-item>
        <el-form-item label="主用端口" prop="primaryPort">

          <el-select v-model="pg['primary-port']" clearable placeholder="请选择主用端口">
            <el-option value="端口1"></el-option>
            <el-option value="端口2"></el-option>
            <el-option value="端口3"></el-option>
            <el-option value="端口4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备用端口" prop="secondaryPort">
          <el-select v-model="pg['secondary-port']" clearable placeholder="请选择备用端口">
            <el-option value="端口1"></el-option>
            <el-option value="端口2"></el-option>
            <el-option value="端口3"></el-option>
            <el-option value="端口4"></el-option>
          </el-select>
          <!--        <el-input v-model="pg.secondaryPort" placeholder="CTP/PTP"></el-input>-->
        </el-form-item>
        <el-form-item label="延迟时间" prop="holdOffTime">
          <el-input v-model="pg['hold-off']" placeholder="延迟倒换时间，单位 ms">
            <i slot="suffix" style="margin-right: 10px">ms</i>
          </el-input>
        </el-form-item>
        <el-form :model="protection" label-width="100px">

          <el-form-item label="SD触发倒换">
            <el-select v-model="switchSdTrigger.SdTrigger" placeholder="SD触发倒换状态">
              <el-option label="使能" value="使能"></el-option>
              <el-option label="禁止" value="禁止"></el-option>
            </el-select>
            <!-- <el-switch
                 v-model="switchSdTrigger.SdTrigger"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
                 style="float: left;margin-top: 9px;margin-left: 3px;">
             </el-switch>-->
          </el-form-item>
        </el-form>
        <el-form-item label="返回模式" prop="mode">
          <el-select v-model="pg['reversion-mode']" clearable placeholder="请选择返回模式，默认返回">
            <el-option label="返回" value="return"></el-option>
            <el-option label="非返回" value="non-return"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changeValue = false" style="float: right;margin: 0 10px">取消</el-button>
          <el-button type="primary" @click="submit" style="float: right;margin: 0 10px">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="protectionVisible"
               :show-close="false"
               width="400px">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">保护组倒换</div>
      </div>
      <div>
        <el-form :model="protection" label-width="80px">
          <el-form-item label="保护名称">
            <el-input v-model="protection.id" autocomplete="off" readonly></el-input>
          </el-form-item>
          <el-form-item label="倒换命令">
            <el-select v-model="protection['switch-reason']" placeholder="请选择倒换命令">
              <el-option value="手动到主"></el-option>
              <el-option value="手动到备"></el-option>
              <el-option value="强制到主"></el-option>
              <el-option value="强制到备"></el-option>
              <el-option value="锁定到主"></el-option>
              <el-option value="锁定到备"></el-option>
              <el-option value="清除"></el-option>

              <!--                                 <el-option label="无倒换" value="NO_SWITCH"></el-option>
                                               <el-option label="SF倒换" value="SF_SWITCH"></el-option>
                                               <el-option label="SD倒换" value="SD_SWITCH"></el-option>
                                               <el-option label="手动倒换" value="MANUAL_SWITCH"></el-option>
                                               <el-option label="强制倒换" value="FORCE_SWITCH"></el-option>
                                               <el-option label="清除" value="CLEARED"></el-option>
                                               <el-option label="等待恢复" value="WAIT-TO-RESTORE"></el-option>
                                               <el-option label="锁定" value="LOCKOUT"></el-option>-->
            </el-select>
          </el-form-item>
          <!--              <el-form-item label="方向">-->
          <!--                <el-select v-model="protection.protectionDirection" placeholder="请选择倒换方向">-->
          <!--                  <el-option label="到主" value="备到主"></el-option>-->
          <!--                  <el-option label="到备" value="主到备"></el-option>-->
          <!--                </el-select>-->
          <!--              </el-form-item>-->


        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-bottom: 30px">
          <el-button @click="protectionVisible = false" style="float: right;margin: 0 10px">取消</el-button>
          <el-button type="primary" @click="switchReason" style="float: right;margin: 0 10px">确 定</el-button>
        </div>
      </div>
      <!--      <el-tabs active-name="1">
              <el-tab-pane label="保护组倒换操作" name="1">
                <div>
                  <el-form :model="protection" label-width="80px">
                    <el-form-item label="保护组 ID">
                      <el-input v-model="protection.id" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="倒换命令">
                      <el-select v-model="protection.switchReason" placeholder="请选择倒换命令">
                        <el-option value="手动到主"></el-option>
                        <el-option value="手动到备"></el-option>
                        <el-option value="强制到主"></el-option>
                        <el-option value="强制到备"></el-option>
                        <el-option value="清除"></el-option>
                        <el-option label="锁定"></el-option>
      &lt;!&ndash;                                 <el-option label="无倒换" value="NO_SWITCH"></el-option>
                                       <el-option label="SF倒换" value="SF_SWITCH"></el-option>
                                       <el-option label="SD倒换" value="SD_SWITCH"></el-option>
                                       <el-option label="手动倒换" value="MANUAL_SWITCH"></el-option>
                                       <el-option label="强制倒换" value="FORCE_SWITCH"></el-option>
                                       <el-option label="清除" value="CLEARED"></el-option>
                                       <el-option label="等待恢复" value="WAIT-TO-RESTORE"></el-option>
                                       <el-option label="锁定" value="LOCKOUT"></el-option>&ndash;&gt;
                      </el-select>
                    </el-form-item>
      &lt;!&ndash;              <el-form-item label="方向">&ndash;&gt;
      &lt;!&ndash;                <el-select v-model="protection.protectionDirection" placeholder="请选择倒换方向">&ndash;&gt;
      &lt;!&ndash;                  <el-option label="到主" value="备到主"></el-option>&ndash;&gt;
      &lt;!&ndash;                  <el-option label="到备" value="主到备"></el-option>&ndash;&gt;
      &lt;!&ndash;                </el-select>&ndash;&gt;
      &lt;!&ndash;              </el-form-item>&ndash;&gt;
                  </el-form>
                  <div slot="footer" class="dialog-footer" style="float: right">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="switchReason">确 定</el-button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="SD 触发保护倒换" name="2">
                <el-form :model="protection" label-width="100px">
                  <el-form-item label="保护组 ID">
                    <el-input v-model="protection.id" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="SD 触发倒换">
                    <el-switch
                        v-model="switchSdTrigger.SdTrigger"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="float: left;margin-top: 9px;margin-left: 3px;">
                    </el-switch>
                    <el-button @click="switchSdTriggerEnable" style="float: right;margin-right: 3px" type="primary">设置
                    </el-button>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>

              </el-tab-pane>
            </el-tabs>-->

    </el-dialog>


  </div>
</template>

<script>
import axios from "axios"
import PGConfig from "@/components/dispose/pg/PGParams";

export default {
  name: "PGList",
  components: {
    PGConfig
  },
  data() {
    return {
      search: '',
      protectionVisible: false,
      pgFormVisible: false,
      changeValue: false,
      pgInfo: {
        "pg": [
          {
            "pg-id": "1",
            name: '',
            "protection-type": "SNCP1+1",
            "switch-type": "单端倒换",
            "switch-reason": 'SD倒换',
            protectionDirection: '主到备',
            "reversion-mode": "返回",
            "wait-to-restore-time": "60",
            "hold-off": "30",
            "primary-port": "端口1",
            "secondary-port": "端口2",
            selectedPort: '端口1',
          },
          {
            "pg-id": "2",
            name: '保护组1',
            "protection-type": "OCH1+1",
            "switch-type": "双端倒换",
            "switch-reason": '手动倒换',
            protectionDirection: '备到主',
            "reversion-mode": "非返回",
            "wait-to-restore-time": "60",
            "hold-off": "30",
            "primary-port": "端口3",
            "secondary-port": "端口4",
            selectedPort: '端口3',
          },
          {
            "pg-id": "3",
            name: '保护组2',
            "protection-type": "OCH1+1",
            "switch-type": "单端倒换",
            "switch-reason": '手动倒换',
            protectionDirection: '主到备',
            "reversion-mode": "",
            "wait-to-restore-time": "100",
            "hold-off": "30",
            "primary-port": "端口9",
            "secondary-port": "端口10",
            selectedPort: '端口9',
          },
          {
            "pg-id": "4",
            name: '',
            "protection-type": "SNCP1+1",
            "switch-type": "单端倒换",
            "switch-reason": '无倒换',
            protectionDirection: '主到备',
            "reversion-mode": "返回",
            "wait-to-restore-time": "90",
            "hold-off": "50",
            "primary-port": "端口11",
            "secondary-port": "端口12",
            selectedPort: '端口11',
          },
          {
            "pg-id": "5",
            name: '',
            "protection-type": "SNCP1+1",
            "switch-type": "双端倒换",
            "switch-reason": '等待恢复',
            protectionDirection: '主到备',
            "reversion-mode": "返回",
            "wait-to-restore-time": "90",
            "hold-off": "50",
            "primary-port": "端口4",
            "secondary-port": "端口5",
            selectedPort: '端口4',
          }
        ]
      },
      protection: {
        id: '',
        "switch-reason": '',
        "protection-direction": ''
      },
      switchSdTrigger: {
        id: '',
        SdTrigger: '禁止'
      },
      pg: {
        "pg-id": "5",
        name: '',
        "protection-type": "SNCP1+1",
        "switch-type": "双端倒换",
        "reversion-mode": "返回",
        "wait-to-restore-time": "90",
        "hold-off": "50",
        "primary-port": "端口4",
        "secondary-port": "端口5",
      },
      m_row: '',
    }
  },
  methods: {

    computeName(name) {
      let sub = "/port=";
      for (let i = 0; i <= (name.length - sub.length); i++) {
        if (name.substring(i, i + sub.length) === sub) {
          return name.substring(i + sub.length, name.length);
        }
      }
    },

    computeSlot(name) {
      let sub = "/slot=";
      for (let i = 0; i <= (name.length - sub.length); i++) {
        if (name.substring(i, i + sub.length) === sub) {
          let slot = name.substring(i + sub.length, name.length);
          return slot.substring(0, slot.indexOf("/"));
        }
      }
    },

    getPgs() {
      let node = "hclink3";
      if (node !== "") {
        axios.get("/topology/node/" + node + "/pgs").then(
            response => {
              console.log(response.data);

              // eslint-disable-next-line no-prototype-builtins
              if (response.data.hasOwnProperty("pgs")) {
                this.pgInfo = response.data.pgs;
              }
            },
            error => {
              console.log(error.messageData);
            }
        )
      }
    },

    open() {
      this.$confirm('此操作将永久删除该保护组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index, row) {
      this.pg = row;
      this.changeValue = true;
      console.log(index, row);
      this.m_row = index;
    },
    submit() {

      this.pgInfo.pg[this.m_row] = this.pg;

      this.changeValue = false;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除【id= ' + row[index]['pg-id'] + '】的保护组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            row.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

      console.log(index, row);
    },

    performProtectionCommand(index, row) {
      this.m_row = index;
      console.log(index, row);
      this.protection.id = row['pg-id'];
      this.protectionVisible = true;
    },
    switchReason() {
      this.pgInfo.pg[this.m_row]['switch-reason'] = this.protection['switch-reason'];
      this.pgInfo.pg[this.m_row].protectionDirection = this.protection.protectionDirection;

    },
    switchSdTriggerEnable() {

    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0 && columnIndex === 2) { //指定坐标rowIndex ：行，columnIndex ：列
        return 'background:#d595f5' //rgb(105,0,7)
      } else {
        return ''
      }
    },
    headerCellClass({row, rowIndex}) {

    },


    // 切换input框的显示状态
    switchShow(index, tag, tmp_this = this) {
      // 因为涉及到调用不同名称的变量, 不清楚怎么写, 只能先用switch case解决
      switch (tag) {
        case "tag1":
          tmp_this.tableData[index].is_show_tag1 = !tmp_this.tableData[index].is_show_tag1;
          break;
        case "tag2":
          tmp_this.tableData[index].is_show_tag2 = !tmp_this.tableData[index].is_show_tag2;
          break;
          // ...
      }
      tmp_this.tableData = [...tmp_this.tableData];//因为我table绑定的表格数据是后接过来赋值的，所以需要这步操作，如果没有1、2步骤这个可以不加。后面也一样
    },

    // 显示input框, 使光标焦点当前input框
    changeEnddate(index, tag, rowdata) {
      this.switchShow(index, tag, this);
      // console.log('enddateinput' + index, typeof 'enddateinput' + index);
      // console.log(rowdata, typeof rowdata);
      setTimeout(() => {  //定时器是为了避免没有获取到dom的情况报错，所以象征性的给1毫秒让他缓冲
        this.$refs['enddateinput' + tag + '&' + index].focus()
        //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
      }, 1)
    },


  },

  mounted() {
    this.$bus.$on('pg:config:visible', (data) => {
      this.pgFormVisible = data;
    })
  }
}
</script>

<style>
.el-dialog__header {
  padding: 0 !important;
}

.header-title {
  font-size: 18px;
  text-align: left;
  line-height: 30px;
}

.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}


.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  text-align: left;
  border-left: 5px solid #77c5f5;
  margin: 60px 0;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
</style>